<html>
<head>
    <style type="text/css">

        textarea {
            font-family: Courier New, monospace ;
            font-size: medium;
        }

        .cpp {
            position: relative;
            width: 100%;
        }

        #input   { height: 80% ; resize:none; }
        #output  { height: 20% ; resize:none; }



    </style>
    <script type="text/javascript">


        var app = {};

        app.cache = {};
        app.bump = false;


        app.log = function (msg) {
            console.log(msg);
        };

        app.input = document.getElementById("input");
        app.inputMargin = 10;


        app.send = function (title, payload) {

            if (app.cache[payload] !== undefined) {
                app.onReply(app.cache[payload]);
                app.output.style.color = "gray";
                return;
            }
            else {
                app.output.style.color = "black";
            }

            var httpRequest = new XMLHttpRequest();

            var url = "http://" + window.location.hostname + ":" + window.location.port + '/compile';

            httpRequest.open("PUT", url, true);

            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {
                        app.cache[payload] = httpRequest.responseText;
                        app.onReply(httpRequest.responseText);
                    }
                }
            };
            httpRequest.send(payload);
        };

        window.onload = function () {
            app.input = document.getElementById("input");
            app.output = document.getElementById("output");
            if (localStorage.backup !== undefined) {
                app.input.value = localStorage.backup;
            }
            app.output.disabled = true;


            app.input.onkeydown = function(e) {
                app.bump = true;
                if (!e && event.keyCode == 9)
                {
                    event.returnValue = false;
                    insertAtCursor(app.input, "    ");
                }
                else if (e.keyCode == 9)
                {
                    e.preventDefault();
                    insertAtCursor(app.input, "    ");
                }
            };

            app.enterTimeoutLoop();
        };

        app.previous = "";


        app.enterTimeoutLoop = function () {
            app.timeoutLoopImpl();
            window.setTimeout(app.enterTimeoutLoop, 500);
        };


        app.timeoutLoopImpl = function() {

            // Every time the user presses a key the compilation is delayed.
            // This attempts prevent compilation while typing.
            if (app.bump === true) {
                app.bump = false;
                return;
            }

            if (app.previous === app.input.value) {
                app.next = app.input.value;
                return;
            }

            localStorage.backup = app.input.value;

            app.output.value = "Compiling...";
            app.previous = app.input.value;
            app.onCompile();
        }


        app.onCompile = function () {
            app.send("compile", app.input.value);
        };

        app.onReply = function (reply) {
            app.output.value = reply;
        };

        function insertAtCursor(myField, myValue) {
            //IE support
            if (document.selection) {
                var temp;
                myField.focus();
                sel = document.selection.createRange();
                temp = sel.text.length;
                sel.text = myValue;
                if (myValue.length == 0) {
                    sel.moveStart('character', myValue.length);
                    sel.moveEnd('character', myValue.length);
                } else {
                    sel.moveStart('character', -myValue.length + temp);
                }
                sel.select();
            }
            //MOZILLA/NETSCAPE support
            else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
                myField.selectionStart = startPos + myValue.length;
                myField.selectionEnd = startPos + myValue.length;
            } else {
                myField.value += myValue;
            }
        }


    </script>
</head>
<body>

<span id="input_span" class="cpp">
    <label for="input"></label>
    <textarea id="input" class="cpp">#include &ltiostream&gt

int main()
{
    std::cout << "Hello World!" << std::endl;
}</textarea>
</span>


<span id="output_span" class="cpp">
    <label for="output"></label>
    <textarea id="output" class="cpp"></textarea>
</span>


</body>
</html>
